<template>
  <div class="register" :style="{width: fullWidth+'px', height:fullHeight+'px'}">

    <a-spin v-if="loddingVisible" tip="Loading...">
      <a-alert
          message="~~~正在登录~~~~"
          description="客官请稍等哦！"
      ></a-alert>
    </a-spin>
    <div class="img_box" :style="{width: fullWidth+'px'}">
          <a-form
              :model="dataForm"
              name="normal_login"
              class="login-form"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
          >
            <h2>登 录</h2>
            <div id="psd-layer"></div>
            <a-form-item
                label="账号"
                name="id"
                :rules="[{ required: true, message: '请输入账号!' }]"
            >
              <a-input v-model:value="dataForm.id">
                <template #prefix>
                  <UserOutlined class="site-form-item-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item
                label="密码"
                name="password"
                :rules="[{ required: true, message: '请输入密码!' }]"
            >
              <a-input-password v-model:value="dataForm.password">
                <template #prefix>
                  <LockOutlined class="site-form-item-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item>
              <a-form-item name="remember" no-style>
                <a-checkbox v-model:checked="dataForm.remember">记住我</a-checkbox>
              </a-form-item>
              <a class="login-form-forgot" href="">忘记密码</a>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" html-type="submit" class="login-form-button">
                登录
              </a-button>
              Or
              <router-link to="/register">注册!</router-link>
            </a-form-item>
            <h3>--其他登录方式--</h3>
            <a-row :gutter="[16, 24]" style="align-items: center; justify-content: center">
              <a-col class="gutter-row" :span="6">
                <div class="gutter-box">
                  <!--qq登录按钮-->
                  <a>
                    <a-image :preview="false" :width="50" :src="QQLogoURL" @click="qqLogin"/>
                  </a>
                </div>
                <span id="qqLoginBtn"></span>
              </a-col>
            </a-row>

          </a-form>
    </div>

  </div>
</template>


<script setup>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import {ref, onMounted, onBeforeUnmount} from 'vue'
import QQLogoURL from '@/assets/img/01-qq-logo.png'
import {QC} from '@/assets/js/qc_jssdk'
import {message} from "ant-design-vue";
import request from "@/utils/request";
import router from "@/router";
import {useSocketStore} from "@/utils/websocket";
import {serverHost, serverPort, wsPath} from "@/utils/constant";

let loddingVisible = ref(false)

let fullWidth = ref(document.documentElement.clientWidth)
let fullHeight = ref(document.documentElement.clientHeight)

let dataForm = ref({
  id: '',
  password: '',
  remember: false
})

const handleResize = ()=>{
  fullWidth.value = document.documentElement.clientWidth
  fullHeight.value = document.documentElement.clientHeight
}

function onFinish(){
  loddingVisible.value = true
  request({
    url: '/auth/login',
    method: 'post',
    data: request.adornData(dataForm.value)
  }).then(res => {
    if (res.code === 0){
      console.log(res)
      message.success(res.msg)
      //TODO 登录成功逻辑
      localStorage.setItem('loginStatus', 'logging')
      localStorage.setItem('token', JSON.stringify({tokenName: res.data.token.tokenName, tokenValue: res.data.token.tokenValue}))

      // 开启websocket连接, 注册ChannelId-key信息（默认注册为 memberId, session里面存的Id就是memberId）
      useSocketStore().sendMsgParam.fromId = res.data.session.id
      createWsbSocketConnect()

      router.push({
        path: '/'
      })
    }else {
      message.error(res.msg)
    }
  }).catch(err=>{
    message.error('登录失败'+err.message)
    console.log('登录异常', err.message)
  }).finally(_=>{
    loddingVisible.value = false
  })
}

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

const qqLogin = ()=>{
  console.log('QQ登录')
  var A=window.open("oauth/index.php","TencentLogin",
      "width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
}

const createWsbSocketConnect = ()=>{
  const ws = useSocketStore()
  useSocketStore().sendMsgParam.type = 0
  ws.connection(`ws://${serverHost}:${serverPort}${wsPath}`)
}

onMounted(_=>{
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(_=>{
  window.removeEventListener('resize', handleResize)
})

</script>

<style scoped>
.register {
  position: fixed;
  top: 0;
  left: 0;
}

.img_box{
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/loginbackground.jpg') fixed no-repeat;
  background-size: cover;
  width: 101%;
  height: 101%;
}

.login-form {
  width: 340px;
  height: 400px;
  display: flex;
  flex-direction: column;
  padding: 40px;
  text-align: center;
  position: relative;
  z-index: 100;
  background: inherit;
  border-radius: 18px;
  overflow: hidden; /* 隐藏多余的模糊效果 */
}

.login-form::before {
  content: "";
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  position: absolute;
  top: -10px;
  left: -10px;
  overflow: hidden;
  background: inherit;
  box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.25);
  filter: blur(6px);
  z-index: -1;
}

.login-form h2 {
  font-size: 18px;
  font-weight: 400;
  color: #3d5245;
}

.login-form input,
.login-form button {
  margin: 6px 0;
  height: 36px;
  border: none;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 0 14px;
  color: #3d5245;
}

.login-form input::placeholder {
  color: #3d5245;
}

/* 补充，取消选中高亮蓝框 */
.login-form button:focus,
.login-form input:focus {
  outline: 0;
}

.login-form button {
  margin-top: 24px;
  background-color: rgba(57, 88, 69, 0.4);
  color: white;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.4s;
}

.login-form button:hover {
  background-color: rgba(12, 80, 38, 0.67);
}

.login-form button:focus {
  outline: 0;
}

.login-form button::before,
.login-form button::after {
  content: "";
  display: block;
  width: 80px;
  height: 100%;
  background: rgba(179, 255, 210, 0.5);
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  transform: skewX(-15deg);
  filter: blur(30px);
  overflow: hidden;
  transform: translateX(-100px);
}

.login-form button::after {
  width: 40px;
  background: rgba(179, 255, 210, 0.3);
  left: 60px;
  opacity: 0;
  filter: blur(5px);
}

.login-form button:hover::before {
  transition: 1s;
  transform: translateX(320px);
  opacity: 0.7;
}

.login-form button:hover::after {
  transition: 1s;
  transform: translateX(320px);
  opacity: 1;
}
</style>